<style type="text/css">

    #konten {
        height: 200px;
        overflow: auto;
        border: 1px dashed black;
        display:inline-block;
    }

    #judul {
        width: 368px;
        border: 1px dashed black;
    }

    .container {
        margin-bottom: 1.4em;
    }

    .name {
    }

    .field {
        margin: 1em;
    }
    .picbox {
        border: 1px solid black;
        height: 100px;
        width: 100px;
        margin-right: 1.7em;
        display: inline-block;
        clear: both;
    }

    .picbox:hover {
        border-color: red;
        cursor: pointer;
    }

    #simpanbutton {
        float: right;
    }
</style>
<div style="margin-top: 1em;">

    <div class="container">
        <h1 id="judul" class="title content-title">
            {masukkan judul artikel}
        </h1>
    </div>

    <div class="container">
        <div id="konten" class="content-textbox">
            {masukkan narasi artikel}
        </div>
    </div>

    <div class="container" style="margin-bottom: 2em;">
        <?php for ($i = 0; $i < 5; $i++) { ?>
            <div style="display: inline-block;">
                <div id="pic<?php echo $i; ?>" class="img-uploader picbox makethumb"></div>
                <form class="img-uploader" action="<?php echo site_url("service/imageupload/kegpic/1/100/100"); ?>" method="post" enctype="multipart/form-data"></form>
            </div>
        <?php }; ?>
    </div>

    <div class="container" style="margin-bottom: 5.2em; margin-right: 12em;">
        <button id="simpanbutton" onClick="javascript:saveForm();">Simpan</button>
    </div>

</div>
<script type="text/javascript">
            var defJudul, defKonten;
            $(document).ready(function() {
                createTitleEditor("h1#judul", function() {
                    defJudul = $("#judul").text();
                });
                createContentEditor("div#konten", function() {
                    defKonten = $("#konten").html();
                });
                $("h1#judul").focus(function() {
                    if ($("h1#judul").text() === defJudul) {
                        $("h1#judul").text("");
                    }
                });
                $("h1#judul").blur(function() {
                    if ($("h1#judul").text() === "") {
                        $("h1#judul").text(defJudul);
                    }
                });
                $("div#konten").focus(function() {
                    if ($("div#konten").html() === defKonten) {
                        $("div#konten").html("");
                    }
                });
                $("div#konten").blur(function() {
                    if ($("div#konten").html() === "") {
                        $("div#konten").html(defKonten);
                    }
                });
            });
            function saveForm() {

                // inquiry    
                var data = {
                    judul: $("#judul").text(),
                    konten: $("#konten").html(),
<?php
for ($i = 0; $i < 5; $i++) {
    echo "pic" . $i . ": $(\"#pic" . $i . " input[type='hidden']\").val(),";
}
?>

                };

                // validation
                var messages = [];
                var validated = true;
                var goFocus = true;
                //..
                if (data.judul === defJudul) {
                    messages.push("Isi Judul Artikel");
                    validated = false;
                    if (!goFocus) {
                        goFocus = "#judul";
                    }
                }
                if (data.konten === defKonten) {
                    messages.push("Isi Konten Artikel");
                    validated = false;
                    if (!goFocus) {
                        goFocus = "#konten";
                    }
                }

                if (validated) {
                    // send
                    $.ajax({
                        type: "POST",
                        url: "<?php echo site_url("artikel/savePJ"); ?>",
                        data: data,
                        beforeSend: function(xhr) {
                            $("#simpanbutton").prop("disabled", true);
                        },
                        success: function(result, status, xhr) {
                            $("#simpanbutton").prop("disabled", false);
                            window.location = "<?php echo site_url("usercp/historyartikel/pj"); ?>";
                        },
                        error: function(xhr, status, error) {
                            $("#simpanbutton").prop("disabled", false);
                        }
                    });
                } else {
                    var message = "Gagal menyimpan, silahkan : ";
                    message += "<ul>";
                    for (var i = 0; i < messages.length; i++) {
                        message += "<li>" + messages[i] + "</li>";
                    }
                    message += "</ul>";
                    alert(message, "Perhatian");
                    $(goFocus).focus();
                    return false;
                }
            }
</script>